<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="login-box">
    <div class="login">
      <div class="login-title">欢迎登录</div>
      <el-form :model="form" label-width="60px" ref="ruleFormRef" :rules="rules">
        <el-form-item label="账号" prop="account">
          <el-input v-model="form.account" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled="loginBtnLoading" @click="onSubmit(ruleFormRef)">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import { reactive, ref } from "vue";
import { login } from "@/api/auth";
import { setToken } from "@/utils/auth";
import router from "@/router";

const form = reactive({
  account: "admin",
  password: "123456",
});
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  account: [
    { required: true, message: "请输入账号" },
    { min: 5, max: 30, message: "长度为5-30个字符" },
  ],
  password: [
    { required: true, message: "请输入密码" },
    { min: 5, max: 30, message: "长度为5-30个字符" },
  ],
});
let loginBtnLoading = ref<boolean>(false);
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return;
  }
  await formEl.validate(async (valid) => {
    if (valid) {
      loginBtnLoading.value = true;
      let res: any = await login(form);
      if (res.code == 20000) {
        setToken(res.data.token);
        ElMessage.success("登录成功");
        router.push({ path: "/" });
      } else {
        ElMessage.error(res.msg);
      }
      loginBtnLoading.value = false;
    }
  });
};
</script>

<style lang="scss" scoped>
.login-box {
  width: 100%;
  height: 100vh;
  background-color: #ddd;
  background: url("/img/bg.jpg") no-repeat left center / 100% auto;
  font-size: 1vw;
}

.login {
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 4rem 2rem 2rem 2rem;
  border-radius: 1rem;
  text-align: center;
  width: 24rem;
  position: absolute;
  right: 20%;
  bottom: 20%;

  .login-title {
    margin-bottom: 2rem;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: #fff;
  }
}

:deep(.el-form-item__label) {
  color: #fff !important;
}

:deep(.el-button--primary) {
  margin-top: 1rem;
  background-color: rgba(7, 21, 46, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.4);
  width: 5.6rem;
}

:deep(.el-button--primary:hover) {
  border: 1px solid rgba(255, 255, 255, 1);
}

:deep(.el-input__wrapper) {
  background-color: rgba(7, 21, 46, 0.4);
  border: 1px solid rgba(255, 255, 255, 0);
  box-shadow: none;
}

:deep(.el-input__wrapper:hover) {
  border: 1px solid rgba(255, 255, 255, 0.4);
}

:deep(.el-input__inner) {
  color: #fff;
}

:deep(.el-input) {
  --el-input-border-color: red;
}
</style>
